==================================================================
 1.1.   
==================================================================
<html>
<head>
<title>  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
   alert(" onload");
}
$(document).ready(function() {
   alert(" ready().  1");
});
$(document).ready(function() {
   alert(" ready().  2");
});
$(function() {
   alert("  $()");
});
</script>
</head>
<body>
   
</body>
</html>

==================================================================
 1.2.    
==================================================================
<html>
<head>
<title>  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script type="text/javascript">
function $() {
   alert(" $()   ");
}
</script>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
</script>
</head>
<body>
<div id="div1"></div>
<script type= "text/javascript">
$(); //     
jq("#div1").html("   jQuery");
</script>
</body>
</html>

==================================================================
 1.3. HTML-     $()
==================================================================
<html>
<head>
<title>HTML-     $()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("<div> </div>").appendTo("#div1");
});
</script>
</head>
<body>
<div id="div1"> 1</div>
<div id="div2"> 2</div>
</body>
</html>

==================================================================
 3.1.  URL-  
==================================================================
<html>
<head>
<title> URL-  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("a").each(function() {
      $("#div1").append($(this).attr("href") + "<br>");
   });
});
</script>
</head>
<body>
<a href="link1.html"> 1</a><br>
<a href="link2.html"> 2</a><br>
<a href="link3.html"> 3</a><br>
 URL-:<br>
<div id="div1"></div>
</body>
</html>

==================================================================
 4.1.      
==================================================================
<html>
<head>
<title> map()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("a").map(function() {
      var txt = $(this).text();
      if (txt == " 1" || txt == " 3") {
         return this;
      }
      else {
         return null; //  
      }
   }).css("color", "red");
});
</script>
</head>
<body>
<a href="link1.html"> 1</a><br>
<a href="link2.html"> 2</a><br>
<a href="link3.html"> 3</a><br>
<a href="link4.html"> 4</a>
</body>
</html>

==================================================================
 5.1.  width()  height()
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> width()  height()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function showValue() {
   var elem1 = $("#div1");
   var msg = ": " + elem1.height() + "<br>inner: :
";
   msg += elem1.innerWidth() + " : " +
elem1.innerHeight();
   msg += "<br>outer: : " + elem1.outerWidth(true) + "
: ";
   msg += elem1.outerHeight(true);
   $("#div2")
      .html(": " + elem1.width() + " ")
      .append(msg);
}
$(document).ready(function() {
   $(":button").click(function() {
      var w = $("#txt1").val();
      var h = $("#txt2").val();
      var elem = $("#div1");
      if (w != '') {
         w = parseInt(w);
         if (!isNaN(w)) {
            elem.width(w);
            $("#txt1").val("");
         }
         else alert("  !");
      }
      if (h != '') {
         h = parseInt(h);
         if (!isNaN(h)) {
            elem.height(h);
            $("#txt2").val("");
         }
         else alert("  !");
      }
      showValue();
   });
   showValue();
});
//-->
</script>
<style>
#div1 {
   padding:5px; margin:5px;
   width:300px; height:200px;
   border: black 2px dotted;
}
</style>
</head>
<body>
<div id="div1"></div>
<br><b> :</b><br>
<div id="div2"></div><br>
:<br><input type="text" id="txt1"><br>
:<br><input type="text" id="txt2"><br>
<input type="button" value="  ">
</body>
</html>

==================================================================
 5.2.  addClass(), removeClass() 
==================================================================
toggleClass()
<html>
<head>
<title> addClass(), removeClass() 
toggleClass()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#div1").hover(
      function() { //   
         $(this).removeClass().addClass("cls2");
      },
      function() { //   
         $(this).removeClass().addClass("cls1");
      }
   );
   $("#div2").hover(
      function() { //   
         $(this).toggleClass("cls2");
      },
      function() { //   
         $(this).toggleClass("cls2");
      }
   );
});
</script>
<style>
.cls1 { color:#000000; text-decoration:none; }
.cls2 { color:#ff0000; text-decoration:underline; }
</style>
</head>
<body>
<div id="div1" class="cls1">   
</div><br>
<div id="div2" class="cls1">   
</div>
</body>
</html>

==================================================================
 5.3.      
==================================================================
<html>
<head>
<title>    
</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#btn1").click(function() { //  1
      var vals = $("#sel1").val() || [];
      var count = vals.length;
      if (count > 0) {
         var elem = $("#div1").empty();
         for (var i=0; i<count; i++) {
            elem.append(vals[i] + " =&gt; " +
            $("#sel1 option[value='" + vals[i] + "']").text()
+
            "<br>");
         }
      }
      else {
         $("#div1").html("  ");
      }
   });
   $("#btn2").click(function() { //  2
      var sels = $("#sel1 option:selected");
      var count = sels.size();
      if (count > 0) {
         var elem = $("#div1").empty();
         for (var i=0; i<count; i++) {
            elem.append(sels.eq(i).val() + " =&gt; " +
            sels.eq(i).text() + "<br>");
         }
      }
      else {
         $("#div1").html("  ");
      }
   });
   $("#btn3").click(function() { //  3
      var elem = $("#div1").empty();
      $("#sel1 option:selected").each(function() {
         elem.append(this.value + " =&gt; " + this.text +
"<br>");
      });
      if (elem.text() == "") {
         elem.html("  ");
      }
   });
});
</script>
</head>
<body>
<select id="sel1" size="5" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="div1"></div>
<input type="button" value=" 1" id="btn1"><br>
<input type="button" value=" 2" id="btn2"><br>
<input type="button" value=" 3" id="btn3">
</body>
</html>

==================================================================
 5.4.  offset()  position()
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> offset()  position()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("p").one("click", function() {
      var elem = $(this);
      var obj1 = elem.offset();
      var obj2 = elem.position();
      var msg = "Offset top: " + obj1.top + " left: " +
obj1.left;
      msg += " Position top: " + obj2.top + " left: " +
obj2.left;
      elem.html(msg);
   });
});
//-->
</script>
</head>
<body>
<p> 1</p>
<div style="margin:20px;padding:15px;border: black 2px
dotted;">
<p style="margin:10px;"> 2</p>
</div>
  
</body>
</html>

==================================================================
 5.5.  scrollTop()  scrollLeft()
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> scrollTop()  scrollLeft()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#div1").click(function() {
      var elem = $("body");
      $(this)
      .html("top: " + elem.scrollTop() + " left: " +
elem.scrollLeft());
      elem.scrollTop(0).scrollLeft(0);
   });
});
//-->
</script>
<style>
#div1 {
   margin:20px;padding:15px;
   width:1500px; height:1500px;
   border: black 2px dotted;
   background-color:silver;
}
</style>
</head>
<body>
<div id="div1">     
 
  <br>
      0</div>
</body>
</html>

==================================================================
 6.1.        
==================================================================
<html>
<head>
<title>      
</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(window).resize(function() {
      var elem = $(window);
      $("#div1").html(": " + elem.width() + "<br>")
         .append(": " + elem.height());
   });
});
//-->
</script>
</head>
<body><div id="div1"></div>

</body>
</html>

==================================================================
 6.2.    hover()
==================================================================
<html>
<head>
<title>   hover()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#div1").mouseover(function() {
      $("#log1").append(" onmouseover<br>");
   });
   $("#div1").mouseout(function() {
      $("#log1").append(" onmouseout<br>");
   });
   $("#div2").hover(
      function() {
         $("#log2").append(" onmouseover<br>");
      },
      function() {
         $("#log2").append(" onmouseout<br>");
      }
   );
});
//-->
</script>
<style>
.cls1 {
   border:2px solid black; background-color:green;
padding:30px;
}
.cls2 {
   border:2px solid black; background-color:silver;
}
</style>
</head>
<body>
<b> :</b><br>
<div class="cls1" id="div1">
<div class="cls2">
 1<br>
 2
</div>
</div>
<div id="log1"></div>
<b> hover():</b><br>
<div class="cls1" id="div2">
<div class="cls2">
 1<br>
 2
</div>
</div>
<div id="log2"></div>
</body>
</html>

==================================================================
 6.3.  
==================================================================
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":text").keyup(function(e){
      $("#div1").append("keyup " + e.keyCode + "<br>");
   });
   $(":text").keydown(function(e){
      $("#div1").append("keydown " + e.keyCode + "<br>");
   });
   $(":text").keypress(function(e){
      $("#div1").append("keypress " + e.keyCode + "<br>");
   });

});
//-->
</script>
</head>
<body>
<input type="text">
<div id="div1"></div>
</body>
</html>

==================================================================
 6.4.  
==================================================================
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":text").focus(function() {
      $(this).css("background-color", "#fffbef");
   }).blur(function() {
      $(this).css("background-color", "#ffffff");
   });
   $("#sel1").change(function(){
      alert("   " + $(this).val());
   });
   $("form").submit(function(){
      if (window.confirm("  ?")) {
         return true;
      }
      else return false;
   });
   $(":text").select(function(){
      alert(" ");
   });
   $("#btn1").click(function(){
      $("#txt1").select();
   });
   $("#btn2").click(function(){
      $("#txt1").focus();
   });
   $("#btn3").click(function(){
      $("#txt1").blur();
   });
   $("#btn4").click(function(){
      $("#frm").submit();
   });
});
//-->
</script>
</head>
<body>
<form id="frm">
<select id="sel1">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
</select>
<input type="text" id="txt1">
<input type="submit" value="">
</form>
<input type="button" value=" " id="btn1">
<input type="button" value="   "
id="btn2">
<input type="button" value="   " id="btn3">
<input type="button" value=" " id="btn4">
</body>
</html>

==================================================================
 6.5.  mouseenter  mouseleave
==================================================================
<html>
<head>
<title> mouseenter  mouseleave</title>
<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#div1").bind("mouseover", function() {
      $("#log1").append(" mouseover<br>");
   });
   $("#div1").bind("mouseout", function() {
      $("#log1").append(" mouseout<br>");
   });
   $("#div2").bind("mouseenter", function() {
      $("#log2").append(" mouseenter<br>");
   });
   $("#div2").bind("mouseleave", function() {
      $("#log2").append(" mouseleave<br>");
   });
});
//-->
</script>
<style>
.cls1 {
   border:2px solid black; background-color:green;
   padding:30px;
}
.cls2 {
   border:2px solid black; background-color:silver;
}
</style>
</head>
<body>
<b> mouseover  mouseout:</b><br>
<div class="cls1" id="div1">
<div class="cls2">
 1<br>
 2
</div>
</div>
<div id="log1"></div>
<b> mouseenter  mouseleave:</b><br>
<div class="cls1" id="div2">
<div class="cls2">
 1<br>
 2
</div>
</div>
<div id="log2"></div>
</body>
</html>

==================================================================
 6.6.  
==================================================================
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("*").click(function(e) {
      $("#div1")
        .append(" " + $(this)[0].tagName + "<br>");
   });
});
//-->
</script>
</head>
<body>
<p>  <span style="color:red"></span></p>
<div id="div1"></div>
</body>
</html>

==================================================================
 6.7.   
==================================================================
<html>
<head>
<title>  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("*").click(function(e) {
      $("#div1")
        .append(" " + $(this)[0].tagName + "<br>");
      return false;
   });
});
//-->
</script>
</head>
<body>
<p>  <span style="color:red"></span></p>
<div id="div1"></div>
</body>
</html>

==================================================================
 6.8.     
==================================================================
stopPropagation()
<html>
<head>
<title>    
stopPropagation()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("*").click(function(e) {
      $("#div1")
        .append(" " + $(this)[0].tagName + "<br>");
      if (e.stopPropagation) e.stopPropagation();
      else e.cancelBubble = true;
   });
});
//-->
</script>
</head>
<body>
<p>  <span style="color:red"></span></p>
<div id="div1"></div>
</body>
</html>

==================================================================
 6.9.    
==================================================================
<html>
<head>
<title>   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#frm").submit(function() {
      var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,4}$/i;
      if (p.test($("#email").val())) {
         if (window.confirm("  ?")) {
            return true;
         }
         else return false;
      }
      else {
         alert("E-mail   ");
         return false;
      }
   });
   $("a").click(function() {
      alert("    ");
      return false;
   });
   $("#email").focus(function() {
      $(this).css("background-color", "#fffbef");
   }).blur(function() {
      $(this).css("background-color", "#ffffff");
   });
});
//-->
</script>
</head>
<body>
<form action="file.php" method="GET" id="frm">
E-mail:<br>
<input type="text" name="email" id="email"><br>
<input type="submit" value="">
</form>
<a href="file.html">    </a><br><br>
</body>
</html>

==================================================================
 6.10.     
==================================================================
preventDefault()
<html>
<head>
<title>    
preventDefault()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_preventDefault(e) {
   (e.preventDefault) ? e.preventDefault() : e.returnValue =
false;
}
$(document).ready(function() {
   $("#frm").submit(function(e) {
      var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,4}$/i;
      if (p.test($("#email").val())) {
         if (window.confirm("  ?")) {
            return true;
         }
         else f_preventDefault(e);
      }
      else {
         alert("E-mail   ");
         f_preventDefault(e);
      }
   });
   $("a").click(function(e) {
      alert("    ");
      f_preventDefault(e);
   });
   $("#email").focus(function() {
      $(this).css("background-color", "#fffbef");
   }).blur(function() {
      $(this).css("background-color", "#ffffff");
   });
});
//-->
</script>
</head>
<body>
<form action="file.php" method="GET" id="frm">
E-mail:<br>
<input type="text" name="email" id="email"><br>
<input type="submit" value="">
</form>
<a href="file.html">    </a><br><br>
</body>
</html>

==================================================================
 7.1.    
==================================================================
<html>
<head>
<title>   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("a.menu").click(function() {
      //  ,    
      var elem = $(this).nextAll("div.elem:first");
      if (elem.is(":hidden")) { //   
         //   
         $("div.elem:visible").hide();
         //  ,   

         elem.show();
      }
      else { //     
         elem.hide(); //  
      }
      return false; //    
   });
});
//-->
</script>
<style>
.menu { color:black; }
.elem { display:none; }
</style>
</head>
<body>
<a href="#" class="menu">   
1</a><br>
<div class="elem">  1</div>
<a href="#" class="menu">   
2</a><br>
<div class="elem">  2</div>
<a href="#" class="menu">   
3</a><br>
<div class="elem">  3</div>
<a href="#" class="menu">   
4</a><br>
<div class="elem">  4</div>
</body>
</html>

==================================================================
 7.2.  
==================================================================
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").animate({ left: "-=" + $("#txt1").val()},
1000);
   });
   $("#btn2").click(function() {
      $("#div1").animate({ left: "+=" + $("#txt1").val()},
1000);
   });
   $("#btn3").click(function() {
      $("#div1").animate({ top: "-=" + $("#txt1").val()},
1000);
   });
   $("#btn4").click(function() {
      $("#div1").animate({ top: "+=" + $("#txt1").val()},
1000);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:100px;
   background-color:black;
}
</style>
</head>
<body>
<input type="text" value="50px" id="txt1">
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2">
<input type="button" value="" id="btn3">
<input type="button" value="" id="btn4"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

==================================================================
 7.3.   
==================================================================
<html>
<head>
<title>  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").animate({ width: "hide" }, 300);
   });
   $("#btn2").click(function() {
      $("#div1").animate({ width: "show" }, 300);
   });
   $("#btn3").click(function() {
      $("#div1").animate({ width: "toggle" }, "slow");
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:150px;
   height:100px;
   background-color:black;
}
</style>
</head>
<body>
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2">
<input type="button" value="/" id="btn3"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

==================================================================
 7.4.     
==================================================================
<html>
<head>
<title>   
</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1")
      .css({ width: "100px", height: "20px", fontSize: "10px"
})
      .animate({ width: "450px", height: "100px" },
         { queue: false, duration: 2000 })
      .animate({ fontSize: "32px" }, 2000);
   });
   $("#btn2").click(function() {
      $("#div1")
      .css({ width: "100px", height: "20px", fontSize: "10px"
})
      .animate({ width: "450px", height: "100px" },
         { duration: 2000 })
      .animate({ fontSize: "32px" }, 2000);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:20px;
   background-color:white;
   border:black thin dotted;
   font-size:10px;
}
</style>
</head>
<body>
<input type="button" value="queue:false" id="btn1">
<input type="button" value="queue:true" id="btn2"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

==================================================================
 7.5.  
==================================================================
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      if ($("#chc1").is(":checked")) {
         $("#div1").stop().animate({ width: "0.1px" }, 3000);
      }
      else {
         $("#div1").animate({ width: "0.1px" }, 3000);
      }
   });
   $("#btn2").click(function() {
      if ($("#chc1").is(":checked")) {
         $("#div1").stop().animate({ width: "450px" }, 3000);
      }
      else {
         $("#div1").animate({ width: "450px" }, 3000);
      }
   });
   $("#btn3").click(function() {
      $("#div1").stop();
   });
   $("#btn4").click(function() {
      $("#div1").stop(true);
   });
   $("#btn5").click(function() {
      $("#div1").stop(true, true);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:450px;
   height:100px;
   background-color:black;
}
</style>
</head>
<body>
<input type="checkbox" id="chc1" checked>  
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2">
<input type="button" value="" id="btn3">
<input type="button" value=" " id="btn4">
<input type="button" value="   "
id="btn5"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

==================================================================
 7.6.    
==================================================================
<html>
<head>
<title>   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#div1");
      elem.css({ width:"100px", height:"20px", fontSize:"10px"
});
      elem.text("");
      elem.animate({ width:"450px", height:"100px" }, 2000);
      elem.queue(function() {
          $(this).text("  ").dequeue();
      });
      elem.animate({ fontSize:"32px" }, 2000);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:20px;
   background-color:white;
   border:black thin dotted;
   font-size:10px;
}
</style>
</head>
<body>
<input type="button" value="" id="btn1"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

==================================================================
 8.1.       
==================================================================
<html>
<head>
<title>   E-mail  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":text,:password").css("background-color", "#ffffff");
   $("form").submit(function() {
      var pole1 = $("#pole1");
      var pole2 = $("#pole2");
      pole1.css("background-color", "#ffffff");
      pole2.css("background-color", "#ffffff");
      var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,4}$/i;
      if (!p.test(pole1.val())) {
         alert("  E-mail");
         pole1.css("background-color",
"#ffe4e1").focus().select();
         return false;
      }
      p = /^[a-z0-9_\.\-]{6,16}$/i;
      if (!p.test(pole2.val())) {
         alert(" ");
         pole2.css("background-color",
"#ffe4e1").focus().select();
         return false;
      }
      var msg = "   :\n\n E-mail: ";
      msg += pole1.val() + "\n : " + pole2.val();
      alert(msg);
      return true;
   });
});
//-->
</script>
</head>
<body>
<form action="test.php" method="GET">
E-mail:<br>
<input type="text" name="pole1" id="pole1"><br>
:<br>
<input type="password" name="pole2" id="pole2"><br>
<input type="submit" value="">
</form>
</body>
</html>

==================================================================
 8.2.  readOnly  disabled
==================================================================
<html>
<head>
<title> readOnly  disabled</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":text").css("background-color", "#ffffff");
   $("#pole2").attr("readonly", true);
   $("#btn1").attr("disabled", true);
   $("#pole1").keyup(function() {
      var pole1 = $("#pole1").val();
      var btn1 = $("#btn1");
      if (pole1.length == 0) {
         if (!btn1.is(":disabled")) btn1.attr("disabled",
true);
      }
      else {
         if (btn1.is(":disabled"))
btn1.removeAttr("disabled");
      }
      $("#pole2").val(pole1);
   });
   $("#btn1").click(function() {
      $("#pole1").val("").keyup();
   });
   $("#pole3").focus(function() {
      var pole3 = $("#pole3");
      if (pole3.val() == "[]") pole3.val("");
   }).blur(function() {
      var pole3 = $("#pole3");
      if (pole3.val() == "") pole3.val("[]");
   });
});
//-->
</script>
</head>
<body>
<input type="text" id="pole1"><br>
<input type="text" id="pole2"><br>
<input type="button" value="" id="btn1"><br><br>
<input type="text" id="pole3" value="[]">
</body>
</html>

==================================================================
 8.3.       
==================================================================
<TEXTAREA>
<html>
<head>
<title>      
TEXTAREA</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_click() {
   var pole1 = $("#pole1");
   var pole2 = $("#pole2");
   var txt1 = pole1.val();
   var txt2 = pole2.val();
   if (txt1 != "") {
      pole2.val(txt2 + txt1 + "\n");
      pole1.val("").focus();
   }
   else {
      alert("  !");
      pole1.focus();
   }
}
$(document).ready(function() {
   $("#pole1").focus();
   $("form").submit(function() {
      var val = $("#pole2").val();
      alert(" : \n" + val);
      $("#pole1").focus();
      return false;
   });
   $("#pole1").keypress(function(e) {
      if (e.keyCode==13) {
         f_click();
         return false;
      }
   });
   $("#btn1").click(function() {
      f_click();
   });
});
//-->
</script>
</head>
<body>
<form action="test.php" method="GET">
:<br>
<input type="text" name="pole1" id="pole1"><br>
<input type="button" value=" " id="btn1"><br>
<textarea name="pole2" id="pole2" cols="15" rows="10">
</textarea><br>
<input type="submit" value="   ">
</form>
</body>
</html>

==================================================================
 8.4.  
==================================================================
<html>
<head>
<title>  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var arr = [];
arr[1] = ["1 1", "1 2"];
arr[2] = ["2 1", "2 2", "2
3"];
var val = [];
val[1] = ["1", "2"];
val[2] = ["3", "4", "5"];
function f_click() {
   //    
   var pole1 = $("#pole1");
   var pole2 = $("#pole2");
   var text1 = pole1.val();
   var text2 = pole2.val();
   if (text1 != "" && text2 != "") {
      var sel1 = $("#select1").get(0);
      var i = sel1.length++;
      sel1.options[i].text = text1;
      sel1.options[i].value = text2;
      pole1.val("");
      pole2.val("");
      pole1.focus();
   }
   else {
      alert("  !");
      pole1.focus();
   }
}
$(document).ready(function() {
   //    
   $("#pole1").keypress(function(e) {
      if (e.keyCode==13) {
         $("#pole2").focus();
         return false;
      }
   });
   $("#pole2").keypress(function(e) {
      if (e.keyCode==13) {
         f_click();
         return false;
      }
   });
   $("#btn1").click(function() {
      f_click();
   });
   //    
   $("#btn2").click(function() {
      var msg = "";
      $("#select2 option:selected").each(function() {
         msg += this.value + " - " + this.text + "\n";
      });
      if (msg == "") alert("  ");
      else alert(msg);
   });
   //  
   $("#select3").change(function() {
      var index = this.value;
      var count = arr[index].length;
      var el = $("#select4").get(0);
      el.length = count;
      for (i=0; i<count; i++) {
         el.options[i].value = val[index][i];
         el.options[i].text = arr[index][i];
      }
   });
   $("#select4").change(function() {
      var msg = "";
      $("#select4 option:selected").each(function() {
         msg = ": " + this.value;
         msg += "\n: " + this.text;
      });
      alert(msg);
   });
   //    
   $("#select5").change(function() {
      var url = $(this).val();
      if (url != 0) {
         window.location.href = url;
      }
   });
});
//-->
</script>
</head>
<body>
<b>   :</b><br><br>
 :<br>
<input type="text" id="pole1"><br>
 :<br>
<input type="text" id="pole2"><br>
<select id="select1">
</select><br>
<input type="button" value="" id="btn1"><br><br>

<b>   :</b><br><br>
<select id="select2" size="5" multiple>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><br>
<input type="button" value=" "
id="btn2"><br><br>

<b> :</b><br><br>
<select id="select3" size="5">
<option value="1">1</option>
<option value="2">2</option>
</select><br>
<select id="select4">
<option value="1" selected>1 1</option>
<option value="2">1 2</option>
</select><br><br>

<b>   :</b><br><br>
<select id="select5">
<option value="0" selected>----------------</option>
<option value="http://www.mail.ru/">Mail.ru</option>
<option value="http://www.rambler.ru/"></option>
</select><br>
</body>
</html>

==================================================================
 8.5.    
==================================================================
<html>
<head>
<title>   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var msg = "";
      var elem = $("#check1");
      if (elem.is(":checked")) {
         msg = " \n";
         msg += ": " + elem.val() + "\n";
      }
      else {
         msg = " \n";
      }
      var value1 = $("input[id='radio1']:checked").val();
      if (value1 == "male") {
         msg += ": \n";
      }
      else {
         msg += ": \n";
      }
      alert(msg);
   });
   $("#c0").click(function() {
      if ($("#c0").is(":checked")) {
         $("#frm2 :checkbox").attr("checked", true);
      }
      else {
         $("#frm2 :checkbox").removeAttr("checked");
      }
   });
   $("#btn2").click(function() {
      var msg = "";
      $("#frm2 input[id='c[]']:checked").each(function() {
         msg += ": " + this.value + "\n";
      });
      if (msg == "") alert("  ");
      else alert(msg);
   });
});
//-->
</script>
</head>
<body>
<form action="test.php" method="GET" id="frm1">
<input type="checkbox" name="check1" id="check1" value="yes"
checked>
<br><br>
  :<br>
<input type="radio" name="radio1" id="radio1" value="male"
checked>

<input type="radio" name="radio1" id="radio1"
value="female">
<br><br>
<input type="button" value=" " id="btn1">
</form>
<form action="test.php" method="GET" id="frm2">
<input type="checkbox" name="c0" id="c0"> /
<br>
<input type="checkbox" name="c[]" id="c[]" value="1"> 
1<br>
<input type="checkbox" name="c[]" id="c[]" value="2"> 
2<br>
<input type="checkbox" name="c[]" id="c[]" value="3"> 
3<br>
<input type="button" id="btn2" value=" ">
</form>
</body>
</html>

==================================================================
 8.6.    
==================================================================
<html>
<head>
<title>   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#txt1");
      this.value = elem.val();
      elem.val("");
      $(this).attr("disabled", true);
   });
   $("#txt1").keyup(function() {
      var txt1 = $("#txt1").val();
      var btn1 = $("#btn1");
      if (txt1.length == 0) {
         if (!btn1.is(":disabled")) btn1.attr("disabled",
true);
      }
      else {
         if (btn1.is(":disabled"))
btn1.removeAttr("disabled");
      }
   });
});
//-->
</script>
</head>
<body>
<input type="text" id="txt1"><br>
<input type="button" value="   "
   id="btn1" disabled>
</body>
</html>

==================================================================
 8.7.    ,  . 
==================================================================
<html>
<head>
<title>    </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":button").click(function() {
      alert(": " + $(":button").index(this));
   });
});
//-->
</script>
</head>
<body>
<input type="button" value=" 1"><br>
<input type="button" value=" 2"><br>
<button> 3</button><br>
<button> 4</button>
</body>
</html>

==================================================================
 8.8.  serialize(), serializeArray()  $.param()
==================================================================
<html>
<head>
<title> serialize(), serializeArray() 
$.param()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").text($("#frm1").serialize());
      var arr = $("#frm1").serializeArray();
      var txt = "";
      for (var i=0, count=arr.length; i<count; i++) {
         txt += i + " =&gt; " + arr[i].name + " = ";
         txt += arr[i].value + "<br>";
      }
      $("#div2").html(txt);
      $("#div3").text($.param(arr));
   });
});
//-->
</script>
</head>
<body>
<form action="test.php" method="GET" id="frm1">
<input type="text" name="txt1" id="txt1" value=""><br>
<input type="hidden" name="hdn1" id="hdn1" value="1">
<input type="checkbox" name="check1" id="check1" value="yes">
<br>
  :<br>
<input type="radio" name="radio1" id="radio1" value="male"
checked>
<input type="radio" name="radio1" id="radio1"
value="female">
<br>
<input type="checkbox" name="c[]" id="c[]" value="1"> 
1<br>
<input type="checkbox" name="c[]" id="c[]" value="2"> 
2<br>
<input type="checkbox" name="c[]" id="c[]" value="3"> 
3<br>
</form>
<input type="button" id="btn1" value="
"><br><br>
<b>serialize():</b><br>
<div id="div1"></div>
<b>serializeArray():</b><br>
<div id="div2"></div>
<b>$.param():</b><br>
<div id="div3"></div>
</body>
</html>

==================================================================
 9.1.  $.makeArray()
==================================================================
<html>
<head>
<title> $.makeArray()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#div1").click(function() {
      var arr = $.makeArray($("p").get()).reverse();
      $("#div1").append(arr);
   });
});
//-->
</script>
</head>
<body>
<div id="div1"> </div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</body>
</html>

==================================================================
 9.2.  $.unique()
==================================================================
<html>
<head>
<title> $.unique()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   var arr1 = $("a[href$='.php']").get();
   var arr2 = $(".cls1").get();
   $("#div1").append("  arr1: " + arr1.length +
"<br>");
   $("#div1").append("  arr2: " + arr2.length +
"<br>");
   //   
   var arr3 = arr1.concat(arr2);
   $("#div1").append("  arr3: " + arr3.length +
"<br>");
   //    
   arr3 = $.unique(arr3);
   $("#div1").append(" : " + arr3.length +
"<br>");
});
</script>
<style>
.cls1 { color:red; }
</style>
</head>
<body>
<div id="div1"></div>
<a href="link1.html" class="cls1"> 1</a><br>
<a href="link2.php" class="cls1"> 2</a><br>
<a href="link3.html"> 3</a><br>
<a href="link4.php"> 4</a><br>
<p class="cls1"></p>
</body>
</html>

==================================================================
 9.3. ,    
==================================================================
<html>
<head>
<title>,    </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#div1").get(0);
      $.data(elem, "myData", $("#txt1").val());
      $("#div2").text(" ");
   });
   $("#btn2").click(function() {
      var elem = $("#div1").get(0);
      $("#div2").text(": " + $.data(elem, "myData"));
   });
   $("#btn3").click(function() {
      var elem = $("#div1").get(0);
      $.removeData(elem, "myData");
      $("#div2").text(" ");
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div><br>
<input type="text" id="txt1">
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2">
<input type="button" value="" id="btn3">
</body>
</html>

==================================================================
 9.4.  data()  removeData()
==================================================================
<html>
<head>
<title> data()  removeData()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").data("myData", $("#txt1").val());
      $("#div2").text(" ");
   });
   $("#btn2").click(function() {
      $("#div2").text(": " + $("#div1").data("myData"));
   });
   $("#btn3").click(function() {
      $("#div1").removeData("myData");
      $("#div2").text(" ");
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div><br>
<input type="text" id="txt1">
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2">
<input type="button" value="" id="btn3">
</body>
</html>

==================================================================
 9.5.   
==================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xml:lang="en" lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   if ($.boxModel) {
      $("#div1").html(" ");
   }
   else {
      $("#div1").html(" ");
   }
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

==================================================================
 10.1.   <iframe>
==================================================================
<html>
<head>
<title>  &lt;iframe&gt;</title>
</head>
<body>
<form action="ajax.php" method="GET" target="frame_ajax">
<input type="text" name="text1" id="text1"><br>
<input type="submit" value=""><br>
</form>
<div id="otvet"></div>
<iframe name="frame_ajax" src="ajax.php" width="0"
height="0" style="display:none">
</body>
</html>

==================================================================
 10.2.    ajax.php
==================================================================
<?php
header('Content-Type: text/html; charset=utf-8');
if (isset($_GET['text1'])) {
   $msg = ' - ' . $_GET['text1'];
   echo '<script language="JavaScript">', "\n";
   echo "<!--\n";
   echo 'parent.document.getElementById("text1").value = "";',
"\n";
   echo 'parent.document.getElementById("otvet").innerHTML =
"';
   echo htmlspecialchars($msg, ENT_COMPAT, 'UTF-8'), '";';
   echo "\n//-->\n";
   echo "</script>\n";
}
else {
   echo '  ';
}
?>

==================================================================
 10.3.  ,  
==================================================================
<script language="JavaScript">
<!--
parent.document.getElementById("text1").value = "";
parent.document.getElementById("otvet").innerHTML = " -
";
//-->
</script>

==================================================================
 10.4.   XMLHttpRequest
==================================================================
if (window.XMLHttpRequest) {
   link = new XMLHttpRequest();
}
else {
   if (window.ActiveXObject) {
      var XMLHTTP = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.3.0",
                    "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
      for (var i=0; i<4; i++) {
         try { //  
            link = new ActiveXObject(XMLHTTP[i]);
            break; //   ,    
         }
         catch (e) {}
      }
   }
}

==================================================================
 10.5.     
==================================================================
<html>
<head>
<title>    </title>
<script language="JavaScript">
<!--
function f_GET() {
   //    GET
   var link;
   var url;
   var txt = document.getElementById("text1").value;
   if (txt == "") {
      window.alert("  ");
      return false;
   }
   if (window.XMLHttpRequest) {
      link = new XMLHttpRequest();
   }
   else {
      if (window.ActiveXObject) {
         var XMLHTTP = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.3.0",
                       "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
         for (var i=0; i<4; i++) {
            try { //  
               link = new ActiveXObject(XMLHTTP[i]);
               break; //   ,    
            }
            catch (e) {}
         }
      }
   }
   if (!link) {
      window.alert(" -   
Ajax");
      return false;
   }
   url = "/ajax.php?text1=" + encodeURIComponent(txt);
   //     GET
   link.open('GET', url, true);
   link.onreadystatechange = function() {
      f_razborRequest(link);
   };
   link.send(null); //  
   document.getElementById("otvet").innerHTML = "...";
}

function f_POST() {
   //    POST
   var link;
   var param;
   var txt = document.getElementById("text1").value;
   if (txt == "") {
      window.alert("  ");
      return false;
   }
   if (window.XMLHttpRequest) {
      link = new XMLHttpRequest();
   }
   else {
      if (window.ActiveXObject) {
         var XMLHTTP = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.3.0",
                       "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
         for (var i=0; i<4; i++) {
            try { //  
               link = new ActiveXObject(XMLHTTP[i]);
               break; //   ,    
            }
            catch (e) {}
         }
      }
   }
   if (!link) {
      window.alert(" -   
Ajax");
      return false;
   }
   //  
   param = "text1=" + encodeURIComponent(txt);
   //     POST
   link.open('POST', '/ajax.php', true);
   //  HTTP-
   link.setRequestHeader('Content-Type',
      'application/x-www-form-urlencoded');
   link.onreadystatechange = function() {
      f_razborRequest(link);
   };
   link.send(param); //  
   document.getElementById("otvet").innerHTML = "...";
}

function f_razborRequest(link) {
   //   
   if (link.readyState == 4) {
      if (link.status == 200) { //   
         var otvet = link.responseText;
         document.getElementById("text1").value = "";
         document.getElementById("otvet").innerHTML = otvet;
      }
      else {
         document.getElementById("otvet").innerHTML =
"";
      }
   }
}
//-->
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="button" value="  GET"
onclick="f_GET();">
<br>
<input type="button" value="  POST"
onclick="f_POST();">
<div id="otvet"></div>
</body>
</html>

==================================================================
 10.6.    ajax.php
==================================================================
<?php
header('Content-Type: text/html; charset=utf-8');
if (isset($_GET['text1'])) {
   echo ' GET  ', $_GET['text1'];
}
else {
   if (isset($_POST['text1'])) {
      echo ' POST  ', $_POST['text1'];
   }
   else {
      echo '  ';
   }
}
?>

==================================================================
 10.7.     XML
==================================================================
<html>
<head>
<title>    XML</title>
<script language="JavaScript">
<!--
function f_GET() {
   //    GET
   var link;
   var url;
   var txt1 = document.getElementById("text1").value;
   var txt2 = document.getElementById("text2").value;
   if (txt1 == "" || txt2 == "") {
      window.alert("  ");
      return false;
   }
   if (window.XMLHttpRequest) {
      link = new XMLHttpRequest();
   }
   else {
      if (window.ActiveXObject) {
         var XMLHTTP = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.3.0",
                       "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
         for (var i=0; i<4; i++) {
            try { //  
               link = new ActiveXObject(XMLHTTP[i]);
               break; //   ,    
            }
            catch (e) {}
         }
      }
   }
   if (!link) {
      window.alert(" -   
Ajax");
      return false;
   }
   url = "/ajax.php?text1=" + encodeURIComponent(txt1);
   url += "&text2=" + encodeURIComponent(txt2);
   //     GET
   link.open('GET', url, true);
   link.onreadystatechange = function() {
      f_razborRequest(link);
   };
   link.send(null); //  
   document.getElementById("otvet").innerHTML = "...";
}

function f_razborRequest(link) {
   //   
   if (link.readyState == 4) {
      if (link.status == 200) { //   
         var xml = link.responseXML;
         var otvet = xml.getElementsByTagName("otvet");
         var text1 =
otvet.item(0).getElementsByTagName("text1").item(0);
         var text2 =
otvet.item(0).getElementsByTagName("text2").item(0);
         var msg = text1.firstChild.data + "<br>" +
                   text2.firstChild.data;
         document.getElementById("text1").value = "";
         document.getElementById("text2").value = "";
         document.getElementById("otvet").innerHTML = msg;
      }
      else {
         document.getElementById("otvet").innerHTML =
"";
      }
   }
}
//-->
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="text" id="text2"><br>
<input type="button" value="  GET"
onclick="f_GET();">
<br><div id="otvet"></div>
</body>
</html>

==================================================================
 10.8.    ajax.php
==================================================================
<?php
header('Content-Type: text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8" ?>', "\n";
echo "<ajax>\n";
echo "   <otvet>\n";
if (isset($_GET['text1']) && isset($_GET['text2'])) {
   echo "      <text1>";
   echo ' 1  ';
   echo htmlspecialchars($_GET['text1'], ENT_COMPAT, 'UTF-8');
   echo "</text1>\n";
   echo "      <text2>";
   echo ' 2  ';
   echo htmlspecialchars($_GET['text2'], ENT_COMPAT, 'UTF-8');
   echo "</text2>\n";
}
else {
   echo '  ';
}
echo "   </otvet>\n";
echo "</ajax>\n";
?>

==================================================================
 10.9. XML-,     
==================================================================
<?xml version="1.0" encoding="utf-8" ?>
<ajax>
   <otvet>
      <text1> 1   1</text1>
      <text2> 2   2</text2>
   </otvet>
</ajax>

==================================================================
 10.10.     JSON
==================================================================
<html>
<head>
<title>    JSON</title>
<script language="JavaScript">
<!--
function f_GET() {
   //    GET
   var link;
   var url;
   var txt1 = document.getElementById("text1").value;
   var txt2 = document.getElementById("text2").value;
   if (txt1 == "" || txt2 == "") {
      window.alert("  ");
      return false;
   }
   if (window.XMLHttpRequest) {
      link = new XMLHttpRequest();
   }
   else {
      if (window.ActiveXObject) {
         var XMLHTTP = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.3.0",
                       "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
         for (var i=0; i<4; i++) {
            try { //  
               link = new ActiveXObject(XMLHTTP[i]);
               break; //   ,    
            }
            catch (e) {}
         }
      }
   }
   if (!link) {
      window.alert(" -   
Ajax");
      return false;
   }
   url = "/ajax.php?text1=" + encodeURIComponent(txt1);
   url += "&text2=" + encodeURIComponent(txt2);
   //     GET
   link.open('GET', url, true);
   link.onreadystatechange = function() {
      f_razborRequest(link);
   };
   link.send(null); //  
   document.getElementById("otvet").innerHTML = "...";
}

function f_razborRequest(link) {
   //   
   if (link.readyState == 4) {
      if (link.status == 200) { //   
         var json = link.responseText;
         var otvet = eval('(' + json + ')');
         var msg = otvet.text1 + "<br>" + otvet.text2;
         document.getElementById("text1").value = "";
         document.getElementById("text2").value = "";
         document.getElementById("otvet").innerHTML = msg;
      }
      else {
         document.getElementById("otvet").innerHTML =
"";
      }
   }
}
//-->
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="text" id="text2"><br>
<input type="button" value="  GET"
onclick="f_GET();">
<br>
<div id="otvet"></div>
</body>
</html>

==================================================================
 10.11.    ajax.php
==================================================================
<?php
header('Content-Type: text/plain; charset=utf-8');
if (isset($_GET['text1']) && isset($_GET['text2'])) {
   $text1 = htmlspecialchars($_GET['text1'], ENT_COMPAT, 'UTF-
8');
   $text2 = htmlspecialchars($_GET['text2'], ENT_COMPAT, 'UTF-
8');
   $arr = array('text1' => $text1, 'text2' => $text2);
   echo json_encode($arr);
}
else {
   $arr = array('text1' => '  ', 'text2' =>
'');
   echo json_encode($arr);
}
?>

==================================================================
 11.1. SQL-   
==================================================================
CREATE TABLE `films` (
   `id` int(11) auto_increment,
   `name` varchar(255) character set `utf8` collate
`utf8_general_ci`,
   `descr` text character set `utf8` collate
`utf8_general_ci`,
   PRIMARY KEY (`id`)
) engine=MYISAM character set `utf8` collate
`utf8_general_ci`;
INSERT INTO `films` (`id`, `name`, `descr`) VALUES
(1, ' 1', '  1'),
(2, ' 2', '  2'),
(3, ' 3', '  3');

==================================================================
 11.2.   index.php
==================================================================
<?php
//  
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
//  
header('Content-Type: text/html; charset=utf-8');
//   
$db = mysql_connect('localhost', 'root', '123456')
      or die('   ');
mysql_select_db('test') or die('   ');
mysql_query('SET NAMES `utf8`'); //  
?>
<html>
<head>
<title> load()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_show(id, elem) {
   var div = $("#div" + id);
   var link = $(elem);
   if (div.is(":hidden")) {
      if (div.text() == "") {
         div.load("/ajax.php", { "id": id },
         function(responseText, textStatus) {
            if (textStatus == 'error') {
               div.html("  ");
            }
            div.slideDown(300);
            link.html("");
         });
      }
      else {
         div.slideDown(300);
         link.html("");
      }
   }
   else {
      div.slideUp(300);
      link.html("");
   }
}
//-->
</script>
</head>
<body>
<?php
$query = 'SELECT `id`, `name` FROM `films` ORDER BY `name`';
if ($res = mysql_query($query)) {
   while ($row = mysql_fetch_row($res)) {
      echo '<a href="#" onclick="f_show(' . $row[0] . ',
this); ';
      echo 'return false;"></a> <b>';
      echo htmlspecialchars($row[1], ENT_COMPAT, 'UTF-8');
      echo "</b><br>\n";
      echo '<div id="div' . $row[0] . '"
style="display:none;">';
      echo "</div>\n";
   }
}
mysql_close($db);
?>
</body>
</html>

==================================================================
 11.3.   ajax.php
==================================================================
<?php
//  
header('Content-Type: text/html; charset=utf-8');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   exit('    AJAX');
}
if (isset($_POST['id'])) $id = (int)$_POST['id'];
else $id = 0;
if ($id === 0) exit(' id  ');
//   
$db = mysql_connect('localhost', 'root', '123456')
      or die('   ');
mysql_select_db('test') or die('   ');
mysql_query('SET NAMES `utf8`'); //  
$query = 'SELECT `descr` FROM `films` WHERE `id`=' . $id;
if ($res = mysql_query($query)) {
   if (mysql_num_rows($res) != 0) {
      $row = mysql_fetch_row($res);
      echo $row[0]; //  
   }
   else {
      echo '  ';
   }
}
else {
   echo '   ';
}
mysql_close($db);
?>

==================================================================
 11.4.   index.php
==================================================================
<html>
<head>
<title> $.getJSON()  JSON</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":button").click(function() {
      $.getJSON("/ajax.php", { txt: "test" },
         function(jsonObject) {
            $("#div1").html("param1 = " + jsonObject.param1 +
               "<br>" + "param2 = " + jsonObject.param2);
         }
      );
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value=" ">
</body>
</html>

==================================================================
 11.5.   ajax.php
==================================================================
<?php
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Type: text/javascript; charset=utf-8');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   exit('    AJAX');
}
if (!isset($_GET['txt'])) {
   exit('  ');
}
?>
{
param1: " 1",
param2: "<?php echo $_GET['txt']; ?>"
}

==================================================================
 11.6.   http://localhost/index.php
==================================================================
<html>
<head>
<title> $.getJSON()  JSONP</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":button").click(function() {
      $.getJSON("http://site1/ajax.php?txt=test&callback=?",
         function(jsonObject) {
            $("#div1").html("param1 = " + jsonObject.param1 +
               "<br>" + "param2 = " + jsonObject.param2);
         }
      );
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value=" ">
</body>
</html>

==================================================================
 11.7.   http://site1/ajax.php
==================================================================
<?php
header('Content-Type: text/javascript; charset=utf-8');
if (!isset($_GET['callback'])) {
   exit('  ');
}
echo $_GET['callback']; ?>({
param1: "   ",
param2: "<?php echo $_GET['txt']; ?>"
});

==================================================================
 11.8.   http://localhost/index.php
==================================================================
<html>
<head>
<title> $.getScript()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":button").click(function() {
      $.getScript("http://site1/script.js",
         function() {
            if (typeof myStatus != "undefined")
               alert("  ");
            else alert("");
         }
      );
   });
});
//-->
</script>
</head>
<body>
<input type="button" value=" ">
</body>
</html>

==================================================================
 11.9.   http://site1/script.js
==================================================================
var myStatus = "OK";
alert("    ");

==================================================================
 11.10. SQL-   
==================================================================
CREATE TABLE `categories` (
   `id` int(11) auto_increment,
   `name` varchar(255),
   `parentID` int(11),
   PRIMARY KEY (`id`)
) engine=MYISAM character set `utf8` collate
`utf8_general_ci`;
INSERT INTO `categories` VALUES (1, ' 1', 0);
INSERT INTO `categories` VALUES (2, ' 2', 0);
INSERT INTO `categories` VALUES (3, ' 3', 0);
INSERT INTO `categories` VALUES (4, ' 1.1', 1);
INSERT INTO `categories` VALUES (5, ' 1.2', 1);
INSERT INTO `categories` VALUES (6, ' 2.1', 2);
INSERT INTO `categories` VALUES (7, ' 2.2', 2);
INSERT INTO `categories` VALUES (8, ' 3.1', 3);
INSERT INTO `categories` VALUES (9, ' 3.2', 3);
INSERT INTO `categories` VALUES (10, ' 3.3', 3);

==================================================================
 11.11.   index.php
==================================================================
<?php
//  
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
//  
header('Content-Type: text/html; charset=utf-8');
//   
$db = mysql_connect('localhost', 'root', '123456')
      or die('   ');
mysql_select_db('test') or die('   ');
mysql_query('SET NAMES `utf8`'); //  
?>
<html>
<head>
<title> $.get()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_result(data) {
   if (data.indexOf("ERROR") == -1) {
      var el;
      el = '<select size="4" id="sel2">' + data + '</select>';
      $("#sel2").replaceWith(el);
   }
   else {
      if (data == "") alert(" ");
      else alert(data);
   }
   $("#div1").stop().hide(300);
}
$(document).ready(function() {
   $("#sel1").change(function() {

      $("#div1").stop().show(300);
      $("#sel2").attr("disabled", true);
      $.get("/ajax.php", { id: $("#sel1").val() }, f_result);
   });
});
//-->
</script>
<style>
#sel1, #sel2 { width:150px; }
</style>
</head>
<body>
<select size="4" id="sel1">
<?php
$query = 'SELECT `id`, `name` FROM `categories` ';
$query .= 'WHERE `parentID`=0 ORDER BY `name`';
if ($res = mysql_query($query)) {
   while ($row = mysql_fetch_row($res)) {
      echo '<option value="' . $row[0] . '">';
      echo htmlspecialchars($row[1], ENT_COMPAT, 'UTF-8');
      echo "</option>\n";
   }
}
mysql_close($db);
?>
</select>&nbsp;&nbsp;&nbsp;
<select size="4" id="sel2" style="display:none;">
</select>
<div id="div1" style="display:none;">...</div>
</body>
</html>

==================================================================
 11.12.   ajax.php
==================================================================
<?php
//  
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
//  
header('Content-Type: text/html; charset=utf-8');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   exit('ERROR:     AJAX');
}
if (isset($_GET['id'])) $id = (int)$_GET['id'];
else $id = 0;
if ($id === 0) exit('ERROR:  id  ');
//   
$db = mysql_connect('localhost', 'root', '123456')
      or die('ERROR:    ');
mysql_select_db('test') or die('ERROR:   
');
mysql_query('SET NAMES `utf8`'); //  
$query = 'SELECT `id`, `name` FROM `categories` ';
$query .= 'WHERE `parentID`=' . $id . ' ORDER BY `name`';
if ($res = mysql_query($query)) {
   if (mysql_num_rows($res) != 0) {
      while ($row = mysql_fetch_row($res)) {
         echo '<option value="' . $row[0] . '">';
         echo htmlspecialchars($row[1], ENT_COMPAT, 'UTF-8');
         echo "</option>\n";
      }
   }
   else {
      echo '<option value="0"> </option>';
   }
}
else {
   echo 'ERROR:  ';
}
mysql_close($db);
?>

==================================================================
 11.13. SQL-   
==================================================================
CREATE TABLE `mail` (
   `id` int(11) auto_increment,
   `name` varchar(255) default '',
   `email` varchar(255) default '',
   `tema` varchar(255) default '',
   `msg` text,
   `date_msg` datetime,
   `status` enum('new', 'old'),
   PRIMARY KEY (`id`)
) engine=MYISAM character set `utf8` collate `utf8_general_ci`

==================================================================
 11.14.   index.php
==================================================================
<?php
//  
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
//  
header('Content-Type: text/html; charset=utf-8');
?>
<html>
<head>
<title> $.post()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_result(xml) {
   var status = $("status", xml).eq(0).text();
   var msg = $("msg", xml).eq(0).text();
   if (status == "ok") {
      $("#author").val("");
      $("#emails").val("");
      $("#tema").val("");
      $("#msg").val("");
   }
   $("#div1").html(msg);
   $("#btn").removeAttr("disabled");
}
$(document).ready(function() {
   $("#frm").submit(function() {
      $("#btn").attr("disabled", true);
      $("#div1").html("...");
      $.post("/ajax.php", $("#frm").serialize(), f_result,
"xml");
      return false;
   });
   $("#author").keypress(function(e) {
      if (e.keyCode==13) {
         $("#emails").focus();
         return false;
      }
   });
   $("#emails").keypress(function(e) {
      if (e.keyCode==13) {
         $("#tema").focus();
         return false;
      }
   });
   $("#tema").keypress(function(e) {
      if (e.keyCode==13) {
         $("#msg").focus();
         return false;
      }
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<form method="POST" action="ajax.php" id="frm">
<b>:</b><br>
<input type="text" name="author" id="author" size="40"><br>
<b>E-mail:</b><br>
<input type="text" name="emails" id="emails" size="40"><br>
<b>:</b><br>
<input type="text" name="tema" id="tema" size="40"><br>
<b>:</b><br>
<textarea name="msg" id="msg" style="width:300px;
height:150px">
</textarea><br><br>
<input type="submit" id="btn" value="">
</form>
</body>
</html>

==================================================================
 11.15.   ajax.php
==================================================================
<?php
//  
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   header('Content-Type: text/html; charset=utf-8');
   //   ,   JavaScript
   exit('    AJAX');
}
else { //    AJAX
   //     
   header('Content-Type: text/xml; charset=utf-8');
   //  
   if (isset($_POST['emails'])) $emails = $_POST['emails'];
   else $emails = '';
   if (isset($_POST['author'])) $author = $_POST['author'];
   else $author = '';
   if (isset($_POST['tema'])) $tema = $_POST['tema'];
   else $tema = '';
   if (isset($_POST['msg'])) $msg = $_POST['msg'];
   else $msg = '';
   $err_msg = '';
   //   
   $author = trim($author);
   $tema = trim($tema);
   $msg = trim($msg);
   //   magic_quotes_gpc ,
   //      
   if (get_magic_quotes_gpc()) {
       $author = stripslashes($author);
       $tema = stripslashes($tema);
       $msg = stripslashes($msg);
   }
   $pattern = '/^[a-z0-9_.-]+@([a-z0-9-]+\.)+[a-z]{2,6}$/isu';
   if (!preg_match($pattern, $emails)) {
      $err_msg .= '  E-mail !<br>';
   }
   if (mb_strlen($emails, 'UTF-8') > 60) {
      $err_msg .= ' E-mail  60 !<br>';
   }
   if (mb_strlen($author, 'UTF-8') == 0) {
      $err_msg .= '   !<br>';
   }
   if (mb_strlen($author, 'UTF-8') > 30) {
      $err_msg .= '    30 !<br>';
   }
   if (mb_strlen($tema, 'UTF-8') == 0) {
      $err_msg .= '   !<br>';
   }
   if (mb_strlen($tema, 'UTF-8') > 50) {
      $err_msg .= '    50 !<br>';
   }
   if (mb_strlen($msg, 'UTF-8') == 0) {
      $err_msg .= '   !<br>';
   }
   if (mb_strlen($msg, 'UTF-8') > 65000) {
      $err_msg .= '    65000
!<br>';
   }
   if ($err_msg == '') {
      //   
      if (!@$db = mysql_connect('localhost', 'root',
'123456')) {
         $err_msg .= '   !<br>';
      }
      else {
         if (mysql_select_db('test')) {
            mysql_query('SET NAMES `utf8`');
         }
         else {
            $err_msg .= '   !<br>';
         }
      }
   }
   if ($err_msg == '') {
      //   ,   
      //      E-mail  
 mail()
      $author = mysql_real_escape_string($author);
      $tema = mysql_real_escape_string($tema);
      $msg = mysql_real_escape_string($msg);
      $q = "INSERT INTO `mail` VALUES (NULL, '$author',
'$emails', ";
      $q .= "'$tema', '$msg', NOW(), 'new')";
      if (!mysql_query($q)) {
         $err_msg .= '   <br>';
      }
      mysql_close($db);
   }
   if ($err_msg != '') {
      $status = 'error';
      $otvet = '<span style="color:red;">' . $err_msg .
'</span>';
   }
   else {
      $status = 'ok';
      $otvet = '<span style="color:green; font-
weight:bold;">';
      $otvet .= '  </span>';
   }
   $otvet = htmlspecialchars($otvet, ENT_COMPAT, 'UTF-8');

   echo "<ajax>\n";
   echo '<status>' . $status . "</status>\n";
   echo '<msg>' . $otvet . "</msg>\n";
   echo "</ajax>\n";
}
?>

==================================================================
 11.16.   AJAX
==================================================================
<html>
<head>
<title>  AJAX</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#div1").ajaxStart(function() {
      $(this).append("  ajaxStart<br>");
   }).ajaxSend(function() {
      $(this).append("  ajaxSend<br>");
   }).ajaxSuccess(function() {
      $(this).append("  ajaxSuccess<br>");
   }).ajaxError(function() {
      $(this).append("  ajaxError<br>");
   }).ajaxComplete(function() {
      $(this).append("  ajaxComplete<br>");
   }).ajaxStop(function() {
      $(this).append("  ajaxStop<br>");
   });
   $(":button").click(function() {
      $.ajax({
         url: "/ajax.php",
         dataType: "html",
         cache: false,
         beforeSend: function() {
            $("#div1").append(" 
beforeSend<br>");
         },
         dataFilter: function(data) {
            $("#div1").append(" 
dataFilter<br>");
            return data;
         },
         success: function() {
            $("#div1").append(" 
success<br>");
         },
         error: function() {
            $("#div1").append("  error<br>");
         },
         complete: function() {
            $("#div1").append(" 
complete<br>");
         },
         data: { id:1, txt:"" }
      });
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value=" ">
</body>
</html>

==================================================================
 12.1. UI Draggable.  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Draggable.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
* { margin:0; padding:0; }
body { font-size:8pt; font-family:Verdana, sans-serif; }
#draggable {
   position:absolute;
   top:50px; left:50px;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
}
.ui-draggable {
   /* ,     draggable()
*/
   background-color:#E8E8E8;
}
.ui-draggable-dragging {
   /* ,     */
   background-color:#008800;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#draggable").draggable();
});
//-->
</script>
</head>
<body>
<div id="draggable"><p>    </p></div>
</body>
</html>

==================================================================
 12.2.  UI Draggable,   
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Draggable.   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
* { margin:0; padding:0; }
body { font-size:8pt; font-family:Verdana, sans-serif; }
.drag {
   position:absolute;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
}
.ui-draggable {
   /* ,     draggable()
*/
   background-color:#fff4dd;
}
.ui-draggable-dragging {
   /* ,     */
   background-color:#008800;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#draggable1").draggable({
      addClasses: false, //    ui-
draggable
      axis: "x", //    
      revert: true, //      

      cursor: "e-resize", //    
      delay: 200 //   
   });
   $("#draggable2").draggable({
      //     
      containment: "parent",
      opacity: 0.3 //   
   });
   $("#draggable3").draggable({
      grid: [40, 60] //   
   });
   $("#draggable4").draggable({ snap: true, snapTolerance: 30
});
   $("#draggable5").draggable({ snap: "#div1" });
   $("#draggable6").draggable({ snap: "#div1", snapMode:
"inner" });
   $("#draggable7").draggable({ scroll: false }); //
 
   $("#draggable8").draggable({ scrollSensitivity: 100,
scrollSpeed: 20 });
   $("#draggable9").draggable({
      helper: "clone", //   
      //       BODY
      appendTo: "body",
      //       
      revert: true
   });
   $("#draggable10").draggable({
      cursor: "crosshair", //    
      cursorAt: { top: 0, left: 0 } //  
   });
   $("#draggable11").draggable({ zIndex: 9000 });
   $("#draggable12, #draggable13").draggable({
      stack: { group: "#div2 div", min: 5 }
   });
   $("#draggable14").draggable({ cursor: "move", handle:
"#div3" });
   $("#draggable15").draggable({ cancel: "#div3" });
});
//-->
</script>
</head>
<body>
<div style="height:1500px; width:5px;"></div>
<div id="draggable11" class="drag" style="top:200px;
left:700px;">
      
</div>
<div id="draggable1" class="drag" style="top:5px; left:50px;">
     </div>
<div id="div1" style="position:absolute; top:160px; left:50px;
width:550px; height:150px; border:2px solid #000000;">
  id=div1
<div id="draggable2" class="drag" style="top:15px;
left:250px;">
      
</div>
</div>
<div id="draggable3" class="drag"
style="top:5px;left:250px;height:130px;">
       40px  
     60px  </div>
<div id="draggable4" class="drag" style="top:350px;
left:50px;">
      </div>
<div id="draggable5" class="drag" style="top:350px;
left:200px;">
      id=div1</div>
<div id="draggable6" class="drag" style="top:350px;
left:350px;">
      id=div1,   
 </div>
<div id="draggable7" class="drag" style="top:5px;
left:450px;">
       </div>
<div id="draggable8" class="drag" style="top:5px;
left:600px;">
    100px    
 </div>
<div id="draggable9" class="drag" style="top:5px;
left:750px;">
   </div>
<div id="draggable10" class="drag" style="top:350px;
left:500px;">
       </div>
<div id="div2" style="position:absolute; top:500px; left:50px;
width:550px; height:150px; border:2px solid #000000;">
<div id="draggable12" class="drag" style="top:15px;
left:150px;">
        </div>
<div id="draggable13" class="drag" style="top:15px;
left:350px;">
        </div>

</div>
<div id="draggable14" class="drag" style="top:350px;
left:700px;">
<div id="div3" style="background-
color:#ff9600;"></div>
<br>      </div>/
<div id="draggable15" class="drag" style="top:500px;
left:700px;">
<div id="div3" style="background-
color:#ff9600;"></div>
<br>     </div>
</body>
</html>

==================================================================
 12.3.  UI Draggable,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Draggable.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
.drag {
   position:absolute;
   top:10px; left:50px;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
}
.ui-draggable {
   /* ,     draggable()
*/
   background-color:#fff4dd;
}
.ui-draggable-dragging {
   /* ,     */
   background-color:#008800;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#draggable").draggable({
      start: function() {
         $("#div2").append(" start<br>");
      },
      drag: function(e, ui) {
         $("#div2").append(" drag<br>");
         var msg = ":<br> position - : " +
                   ui.position.top;
         msg += " px, : " + ui.position.left + " px<br>";
         msg += "offset - : " + ui.offset.top + " px,
: ";
         msg += ui.offset.left + " px<br>";
         $("#div1").html(msg);
      },
      stop: function(e, ui) {
         $("#div2").append(" stop<br>");
         ui.helper.html("<p> </p>");
      }
   }).bind("dragstart", function() {
      $("#div2").html(" dragstart<br>");
   }).bind("drag", function() {
      $("#div2").append(" drag (bind)<br>");
   }).bind("dragstop", function() {
      $("#div2").append(" dragstop<br>");
   });
   $("#btn1").click(function() {
      $("#draggable").draggable("disable");
   });
   $("#btn2").click(function() {
      $("#draggable").draggable("enable");
   });
});
//-->
</script>
</head>
<body>
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2"><br><br>
<div id="div1"></div><div id="div2"></div>
<div style="position:absolute; top:160px; left:250px;
width:550px; height:150px; border:2px solid #000000;">
 
<div id="draggable" class="drag"><p>   
</p></div>
</div>
</body>
</html>

==================================================================
 12.4.  UI Droppable,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Droppable. &quot;&quot; </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#draggable1").draggable({
      helper: "clone",
      scope: "test", //   
      zIndex: 9000
   });
   $("#droppable1").droppable({
      scope: "test", //   
      drop: function() {
         alert("...");
      }
   });
   $("#draggable2").draggable({ helper: "clone", zIndex: 9000
});
   $("#droppable2").droppable({
      drop: function() {
         alert("...");
      }
   });
});
//-->
</script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
div {
   position:absolute;
   top:10px; left:50px;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
   background-color:#fff4dd;
}
</style>
</head>
<body>
<div id="draggable1" style="top:50px;left:50px;">
      </div>
<div id="droppable1" style="top:50px;left:350px;background-
color:red;">
&nbsp;</div>
<div id="draggable2" style="top:250px;left:50px;">
      </div>
<div id="droppable2"
style="top:250px;left:350px;background-
color:green;">&nbsp;</div>
</body>
</html>

==================================================================
 12.5.  UI Droppable,   greedy
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Droppable.   greedy</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#draggable1").draggable({
      helper: "clone", //   
      zIndex: 9000
   });
   $("#droppable1").droppable({
      //      id=draggable1
      accept: "#draggable1",
      addClasses: false, //    ui-
droppable
      activeClass: "cls1", // ,  

      // , ,    

      hoverClass: "cls2",
      //      
      tolerance: "fit",
      drop: function() {
         alert("   ");
      }
   });
   $("#droppable2").droppable({
      greedy: true,
      activeClass: "cls1",
      hoverClass: "cls2",
      drop: function() {
         alert("   ");
      }
   });
   $("#btn1").click(function() {
      if ($("#droppable2").droppable("option", "greedy")) {
         $("#droppable2").droppable("option", "greedy", false)
         .html(" <br>greedy = false");
      }
      else {
         $("#droppable2").droppable("option", "greedy", true)
         .html(" <br>greedy = true");
      }
   });
});
//-->
</script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
div {
   position:absolute;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
   background-color:#fff4dd;
}
.cls1 { background-color:#ff0000; }
.cls2 { background-color:#008800; }
.ui-draggable-dragging {
   /* ,     */
   background-color:#ff9600;
}
</style>
</head>
<body><br><br>
<input type="button" value="   greedy"
id="btn1">
<div id="draggable1" style="top:150px;left:50px;">
    </div>
<div id="droppable1"
style="top:50px;left:350px;width:250px;height:250px;">
-
<div id="droppable2"
style="top:110px;left:20px;width:200px;height:120px;">
 <br>greedy = true</div>
</div>
</body>
</html>

==================================================================
 12.6.  UI Droppable,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Droppable.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#draggable1").draggable({ revert: "invalid", zIndex:
9000 });
   $("#draggable2").draggable({ revert: "valid", zIndex: 9000
});
   $("#draggable3").draggable({ helper: "clone", zIndex: 9000
});
   $("#droppable").droppable({
      activate: function(e, ui) {
         $("#span1").append(" activate<br>");
         ui.helper.css("background-color", "#ff9600");
      },
      deactivate: function(e, ui) {
         $("#span1").append(" deactivate<br>");
         ui.helper.css("background-color", "#fff4dd");
         $(this).css("background-color", "#fff4dd");
      },
      over: function() {
         $("#span1").append(" over<br>");
         $(this).css("background-color", "#008800");
      },
      out: function() {
         $("#span1").append(" out<br>");
         $(this).css("background-color", "#fff4dd");
      },
      drop: function(e, ui) {
         var msg = " :<br> position - :
";
         msg += ui.position.top +" px, : " +
ui.position.left;
      msg += " px<br>offset - : " + ui.offset.top + "
px, : ";
         msg += ui.offset.left + " px<br>";
         $("#span1").append(" drop<br>" + msg);
      }
   }).bind("dropactivate", function() {
      $("#span1").html(" dropactivate<br>");
   }).bind("dropdeactivate", function() {
      $("#span1").append(" dropdeactivate<br>");
   }).bind("dropover", function() {
      $("#span1").append(" dropover<br>");
   }).bind("dropout", function() {
      $("#span1").append(" dropout<br>");
   }).bind("drop", function() {
      $("#span1").append(" drop (bind)<br>");
   });
   $("#btn1").click(function() {
      $("#droppable").droppable("disable");
   });
   $("#btn2").click(function() {
      $("#droppable").droppable("enable");
   });
});
//-->
</script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
div {
   position:absolute; width:100px; height:100px; padding:2px;
   border:2px solid #000000; text-align:center;
   background-color:#fff4dd;
}
</style>
</head>
<body>
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2"><br><br>
<span id="span1"></span>
<div id="draggable1" style="top:50px;left:600px;z-index:5">
  1<br>revert = invalid</div>
<div id="draggable2" style="top:200px;left:600px;;z-index:5">
  2<br>revert = valid</div>
<div id="draggable3" style="top:350px;left:600px;;z-index:5">
  3<br>helper = clone</div>
<div id="droppable"
style="top:50px;left:250px;width:250px;height:250px;">
-</div>
</body>
</html>

==================================================================
 12.7.  UI Sortable,   
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Sortable.   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:0; list-style-type:none; }
li { margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px;
width:200px;
     font-size:16px; font-family:Verdana, sans-serif;
height:18px;
     border: 1px solid #000000; color:#000000; font-
weight:bold; }
.itemColor1 { background-color:#fff4dd; }
.itemColor2 { background-color:#d5dee7; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#sortable").sortable().disableSelection();
   $("#draggable li").draggable({
      helper: "clone", //   
      //       id=sortable
      connectToSortable: "#sortable"
   }).disableSelection(); //   

});
//-->
</script>
</head>
<body>
<span style="font-weight:bold;">
</span><br><br>
<ul id="sortable">
<li class="itemColor1"> 1</li>
<li class="itemColor1"> 2</li>
<li class="itemColor1"> 3</li>
<li class="itemColor1"> 4</li>
</ul><br><br>
<span style="font-weight:bold;">    

  </span><br><br>
<ul id="draggable">
<li class="itemColor2"> 1</li>
<li class="itemColor2"> 2</li>
<li class="itemColor2"> 3</li>
<li class="itemColor2"> 4</li>
</ul>
</body>
</html>

==================================================================
 12.8.  UI Sortable,   .
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Sortable.   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:0; list-style-type:none; }
li { margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px;
width:200px;
   font-size:16px; font-family:Verdana, sans-serif;
height:18px;
   border: 1px solid #000000; color:#000000; font-weight:bold;
}
.itemColor1 { background-color:#fff4dd; }
.itemColor2 { background-color:#d5dee7; }
.cls1 { border: dotted 1px black; background-color:#ffe9b3; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#sortable1").sortable({
      items: "li", //   LI
      axis: "y", //    
      cursor: "s-resize", //    
      cancel: "span", //   SPAN  
      connectWith: "#sortable2,#sortable3", //  

      delay: 200 //   
   }).disableSelection();
   $("#sortable2").sortable({
      revert: true, //   
      containment: "window", //    
      opacity: 0.5, //  
      helper: "clone", //    
      placeholder: "cls1", //   ""
      connectWith: "#sortable1,#sortable3", //  

      dropOnEmpty: false, //     

      cursorAt: { top: 0 } //    
   }).disableSelection();
   $("#sortable3").sortable({
      connectWith: "#sortable1,#sortable2" //  

   }).disableSelection();
});
//-->
</script>
</head>
<body>
<span style="font-weight:bold;"> 
1</span><br>
     <br><br>
<ul id="sortable1">
<li class="itemColor1"> 1
<span style="background-
color:red;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
</li>
<li class="itemColor1"> 2</li>
<li class="itemColor1"> 3</li>
<li class="itemColor1"> 4</li>
</ul><br><br>
<span style="font-weight:bold;"> 
2</span><br><br>
<ul id="sortable2">
<li class="itemColor2"> 1</li>
<li class="itemColor2"> 2</li>
<li class="itemColor2"> 3</li>
<li class="itemColor2"> 4</li>
</ul><br><br>
<span style="font-weight:bold;"> 
3</span><br>
         
1<br><br>
<ul style="background-
color:#fff4dd;margin:5px;padding:5px;width:250px;"
id="sortable3">
</ul>
</body>
</html>

==================================================================
 12.9.  UI Sortable,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Sortable.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
div { margin: 0; padding: 0; }
body { font-size:10pt; font-family:Verdana, sans-serif; }
h2 { background-color: #ffe9b3; font-size: 12pt;
   padding: 3px 3px 3px 10px; margin: 0 0 5px 0;
}
.section {
   margin: 0 0 15px 5px; width: 300px; height: 100px;
   background-color: #fffbef; border: 1px solid #000000;
   color: #000000; font-weight: bold;
}
#sections, #sections2 { width: 400px; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#sections").sortable({
      items: "div", //  
      handle: "h2", //    
      revert: true, //   
      connectWith: "#sections2", //   
      start: function(e, ui) {
         $("#div1").html(" start<br>");
         ui.helper.find("h2").css("background-color",
"#ff0000");
      },
      sort: function() { $("#div1").append("
sort<br>"); },
      change: function() { $("#div1").append("
change<br>"); },
      beforeStop: function(e, ui) {
         $("#div1").append(" beforeStop<br>");
         ui.helper.find("h2").css("background-color",
"#ffe9b3");
      },
      stop: function() {$("#div1").append(" stop<br>");
},
      update: function() { $("#div1").append("
update<br>"); },
      receive: function(e, ui) {
         $("#div1").append(" receive<br>");
         ui.item.find("p").html("   
");
      },
      remove: function() { $("#div1").append("
remove<br>"); },
      over: function() { $("#div1").append("
over<br>"); },
      out: function() { $("#div1").append(" out<br>");
},
      activate: function() {
         $("#div1").append(" activate<br>");
      },
      deactivate: function() {
         $("#div1").append(" deactivate<br>");
      }
   });
   $("#sections2").sortable({
      items: "div", //  
      handle: "h2", //    
      connectWith: "#sections" //   
   });
   $("#btn1").click(function() {
$("#sections").sortable("disable"); });
   $("#btn2").click(function() {
$("#sections").sortable("enable"); });
   $("#btn3").click(function() {
$("#sections").sortable("cancel"); });
   $("#btn4").click(function() {
      alert($("#sections").sortable("serialize", { attribute:
"id",
         key: "myParam[]", expression: /_(.+)/ }));
      var arr = $("#sections").sortable("toArray", {
attribute: "id" });
      var msg = "";
      for (var i=0, count=arr.length; i<count; i++)
         msg += "[" + i + "] => " + arr[i] + "\n";
      alert(msg);
   });
});
//-->
</script>
</head>
<body>
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2">
<input type="button" value="   1"
id="btn3">
<input type="button" value="   1"
id="btn4">
<br><br>
     <br><br>
<table border="0"><tr><td valign="top">
<div id="sections">
<div class="section" id="item_1">
<h2> 1</h2><p>   1</p></div>
<div class="section" id="item_2">
<h2> 2</h2><p>   2</p></div>
<div class="section" id="item_3">
<h2> 3</h2><p>   3</p></div>
</div>
</td><td valign="top">
<div id="sections2">
<div class="section" id="item_4">
<h2> 4</h2><p>   4</p></div>
<div class="section" id="item_5">
<h2> 5</h2><p>   5</p></div>
<div class="section" id="item_6">
<h2> 6</h2><p>   6</p></div>
</div></td><td valign="top">
<div id="div1"></div>
</td></tr></table>
</body>
</html>

==================================================================
 12.10.  UI Selectable,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Selectable.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:15px; list-style-type:none; }
li { margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px;
width:300px;
     font-size:16px; font-family:Verdana, sans-serif;
height:18px;
     border: 1px solid #000000; color:#000000; font-
weight:bold; }
.ui-selecting { background-color: #ffe9b3; }
.ui-selected { background-color: #ff9600; color: #ffffff; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#selectable").selectable();
});
//-->
</script>
</head>
<body>
      ,   ,

.
<br>   Ctrl,   
.<br>
<ul id="selectable">
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
<li> 6</li>
<li> 7</li>
<li> 8</li>
</ul>
</body>
</html>

==================================================================
 12.11.  UI Selectable,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Selectable.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:15px; list-style-type:none; }
.ui-selectee {
   /* ,    */
   margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px;
width:300px;
   font-size:16px; font-family:Verdana, sans-serif;
height:18px;
   border: 1px solid #000000; color:#000000; font-weight:bold;
}
.ui-selecting {
   /* , ,     
 */   background-color:
#ffe9b3;
}
.ui-selected {
   /* , ,     */
   background-color: #ff9600; color: #ffffff;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#selectable").selectable({
      filter: "li", //  
      cancel: "#id3", //    id=id3  

      // ,       

      tolerance: "touch",
      start: function() { $("#div1").append("
start<br>"); },
      selected: function() {$("#div1").append("
selected<br>");},
      selecting: function() {
         $("#div1").append(" selecting<br>");
      },
      unselected: function() {
         $("#div1").append(" unselected<br>");
      },
      unselecting: function() {
         $("#div1").append(" unselecting<br>");
      },
      stop: function() {
         $("#div1").append(" stop<br>");
         //     
         var elem = $("#selectedItems").empty();
         var sel = $("#selectable li.ui-selected");
         if (sel.size() > 0)
            sel.each(function() { elem.append(" " + this.id);
});
         else elem.append("");
      }
   }).bind("selectablestart", function() {
      $("#div1").html(" selectablestart<br>");
   });
   $("#btn1").click(function() {
$("#selectable").selectable("disable"); });
   $("#btn2").click(function() {
$("#selectable").selectable("enable"); });
});
//-->
</script>
</head>
<body>
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2"><br><br>
<b>ID  :</b> <span
id="selectedItems"></span><br>
<ul id="selectable">
<li id="id1"> 1</li>
<li id="id2"> 2</li>
<li id="id3"> 3</li>
<li id="id4"> 4</li>
<li id="id5"> 5</li>
<li id="id6"> 6</li>
</ul>
<div id="div1"></div>
</body>
</html>

==================================================================
 12.12.  UI Resizable,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Resizable.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#resizable { width:300px; height:150px; padding:15px; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#resizable").resizable();
});
//-->
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
       .</div>
</body>
</html>

==================================================================
 12.13.  UI Resizable, . .  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Resizable.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
.resizable { width:300px; height:150px; padding:15px; }
.cls1 { border:1px dotted #000000; z-index:5000; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#resizable").resizable({
      maxHeight: 600, //  
      maxWidth: 1200, //  
      minHeight: 100, //  
      minWidth: 100, //  
      containment: "parent", //   
      //  ,     

      autoHide: true,
      aspectRatio: true, //  

      stop: function(e, ui) {
         var msg="<b> :</b>  - " +
ui.originalSize.width;
         msg += ",  - " + ui.originalSize.height +
"<br>";
         msg += "<b> :</b>  - " +
ui.size.width;
         msg += ",  - " + ui.size.height + "<br>";
         $("#div1").html(msg);
      }
   });
   $("#resizable2").resizable({
      animate: true, //    
      animateDuration: 1000, // 
      animateEasing: "swing", //  
      helper: "cls1" //    
   });
   $("#resizable3").resizable({ alsoResize: "#resizable4" });
   $("#resizable4").resizable({
      handles: "all", // .    

      //       
      cancel: ".ui-resizable-s"
   });
});
//-->
</script>
</head>
<body>
<div style="width:900px; height:500px; border:1px solid
#000000">
<div id="resizable" class="resizable ui-widget-content">
     

<div id="div1"></div></div>
</div><br><br>
<div id="resizable2" class="resizable ui-widget-content">
    <br>
    </div><br><br>
<div id="resizable3" class="resizable ui-widget-content">
     </div><br><br>
<div id="resizable4" class="resizable ui-widget-content">
      , 
</div><br><br>
</body>
</html>

==================================================================
 12.14.      
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> jQuery UI Accordion</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/start/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#accordion").accordion({
      header: "h3"
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="accordion">
<h3><a href="#"> 1</a></h3>
<div>  1</div>
<h3><a href="#"> 2</a></h3>
<div>  2</div>
<h3><a href="#"> 3</a></h3>
<div>  3</div>
</div>
</body>
</html>

==================================================================
 12.15. , .   UI Accordion
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>     UI Accordion</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/start/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#accordion").accordion({
      event: "mouseover",
      header: "h3",
      icons: {
         header: "ui-icon-arrow-1-e",
         headerSelected: "ui-icon-arrow-1-s"
      },
      navigation: true,
      fillSpace: true
   });
   $("#btn1").click(function() {
      $("#div2").text($("#div1").html());
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<h2> </h2>
<table border="0"><tr><td valign="top">
<div style="width:150px; height:250px;" id="div1">
<div id="accordion">
<h3><a href="#"> 1</a></h3>
<ul>
<li><a href="?1"> 1</a></li>
</ul>
<h3><a href="#"> 2</a></h3>
<ul>
<li><a href="?2"> 2</a></li>
</ul>
<h3><a href="#">  3</a></h3>
<ul>
<li><a href="?3"> 3</a></li>
</ul>
</div>
</div>
</td><td valign="top">
   ,   <br>
<a href="?1">   1</a><br>
<a href="?2">   2</a><br>
<a href="?3">   3</a><br><br>
<input type="button" value="  " id="btn1">
<div id="div2"></div>
</td></tr></table>
</body>
</html>

==================================================================
 12.16.  UI Accordion,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>C   UI Accordion</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/start/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#accordion").accordion({
      header: "h3",
      changestart: function() {
         $("#div1").append(" changestart<br>");
      },
      change: function(e, ui) {
         $("#div1").append(" change<br>");
         ui.newHeader.find("a").html(" ");
         ui.oldHeader.find("a").html(" ");
      }
   });
   $("#accordion").bind("accordionchangestart", function() {
      $("#div1").append(" accordionchangestart<br>");
   }).bind("accordionchange", function() {
      $("#div1").append(" accordionchange<br>");
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="accordion">
<h3><a href="#"> 1</a></h3>
<div>  1</div>
<h3><a href="#"> 2</a></h3>
<div>  2</div>
<h3><a href="#"> 3</a></h3>
<div>  3</div>
</div>
<div id="div1"></div>
</body>
</html>

==================================================================
 12.17.   ,   
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/redmond/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $('#tabs').tabs();
});
//-->
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="tabs">
<ul>
<li><a href="#tabs1"><span> 1</span></a></li>
<li><a href="#tabs2"><span> 2</span></a></li>
<li><a href="#tabs3"><span> 3</span></a></li>
</ul>
<div id="tabs1"><p>  1</p></div>
<div id="tabs2"><p>  2</p></div>
<div id="tabs3"><p>  3</p></div>
</div>
</body>
</html>

==================================================================
 12.18.     AJAX
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>    AJAX</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/redmond/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
        type="text/javascript"></script>
<script src="development-
bundle/external/cookie/jquery.cookie.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#tabs").tabs({
      cookie: { expires: 7 }, //   

      ajaxOptions: { cache: false }, //  

      cache: true, //      
      spinner: "...",
      disabled: [2] //    
   });
   $("#btn1").click(function() {
      $("#tabs").tabs("disable", 1);
   });
   $("#btn2").click(function() {
      $("#tabs").data("disabled.tabs", []);
   });
   $("#btn3").click(function() {
      $("#tabs").tabs("add", "ajax3.php", " ");
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="tabs">
<ul>
<li><a href="#tabs1"><span> 1</span></a></li>
<li><a href="ajax1.php"><span> 2</span></a></li>
<li><a href="ajax2.php"><span> 3</span></a></li>
</ul>
<div id="tabs1"><p>  1</p></div>
</div>
<input type="button" value="  
"
id="btn1">
<input type="button" value="  " id="btn2">
<input type="button" value=" " id="btn3">
</body>
</html>

==================================================================
 12.19.  UI Tabs,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>   UI Tabs</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/redmond/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#tabs").tabs({
      event: "mouseover", //    

      selected: 1, //    
      cache: true, //      
      spinner: "...",
      select: function(e, ui) {
         //    
         if (ui.index == 0) return false;
      },
      load: function() { //    
         $("#div1").append(" load<br>");
      },
      show: function(e, ui) { //   

         var msg = " show<br>";
         msg += " : " + ui.index + "<br>";
         msg += " : " + ui.tab.innerHTML +
"<br>";
         msg += " : " + ui.panel.innerHTML +
"<br>";
         $("#div1").append(msg);
      }
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="tabs">
<ul>
<li><a href="#tabs1"><span> 1</span></a></li>
<li><a href="#tabs2"><span> 2</span></a></li>
<li><a href="ajax1.php"><span> 3</span></a></li>
</ul>
<div id="tabs1"><p>  1</p></div>
<div id="tabs2"><p>  2</p></div>
</div>
<div id="div1"></div>
</body>
</html>

==================================================================
 12.20.      
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> jQuery UI Dialog.   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/smoothness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
        type="text/javascript"></script>
<script type="text/javascript"
   src="development-
bundle1/external/bgiframe/jquery.bgiframe.min.js">
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#dialog").dialog();
});
//-->
</script>
<style>
.ui-dialog { font-size: 8pt; font-family: "Verdana", sans-
serif; }
.ui-dialog-title { font-size: 10pt; font-weight: bold;}
.ui-dialog-content { font-size: 10pt; }
</style>
</head>
<body>
<div id="dialog" title=" ">
<p>   </p>
</div>
</body>
</html>

==================================================================
 12.21.       
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> jQuery UI Dialog</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/smoothness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
        type="text/javascript"></script>
<script type="text/javascript"
   src="development-
bundle1/external/bgiframe/jquery.bgiframe.min.js">
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#dialog").dialog({
      autoOpen: false, //    
      bgiframe: true, //    IE6
      closeOnEscape: true, //     Esc
      title: " ", // 
      position: ["center", 50], //  
      width: 500, //  
      height: "auto", //  
      draggable: false, // 
      resizable: false, //  
      modal: false, //    
      show: null, //    
      hide: null, //    
      buttons: { //  
         "": function() {
            $(this).dialog("close"); //  
         },
         " ": function() {
            $(this).dialog("option", "title",
$("#txt1").val());
            $("#txt1").val("");
         }
      }
   });
//   $(".ui-dialog-titlebar").hide(); //  
//   $(".ui-dialog-titlebar-close").hide(); // 

   $("#btn1").click(function() {
      $("#dialog").dialog("open"); //  
   });
   $("#btn2").click(function() {
      $("#div1").text($(".ui-dialog").html());
   });
});
//-->
</script>
<style>
.ui-dialog { font-size: 8pt; font-family: "Verdana", sans-
serif; }
.ui-dialog-title { font-size: 10pt; font-weight: bold;}
.ui-dialog-content { font-size: 10pt; }
</style>
</head>
<body>
<div id="dialog" title=" ">
<p><span class="ui-icon ui-icon-info"
         style="float:left; margin-right:.3em;"></span>
   .<br><br>
  :<br>
<input type="text" id="txt1" size="40"></p>
</div>
<input type="button" value=" " id="btn1">
<input type="button" value="   "
id="btn2">
<div id="div1"></div>
</body>
</html>

==================================================================
 12.22.  UI Dialog,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>C   UI Dialog</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/smoothness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
        type="text/javascript"></script>
<script type="text/javascript"
   src="development-
bundle1/external/bgiframe/jquery.bgiframe.min.js">
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#dialog").dialog({
      draggable: true,
      resizable: true,
      bgiframe: true,
      beforeclose: function() {
         if (!$("#ckb1").is(":checked")) {
            alert("   
...");
            return false;
         }
      },
      dragStop: function(e, ui) {
         var msg = "position.top = " + ui.position.top +
"<br>";
         msg += "position.left = " + ui.position.left +
"<br>";
         msg += "offset.top = " + ui.offset.top + "<br>";
         msg += "offset.left = " + ui.offset.left + "<br>";
         $("#div1").append(msg + "<br>");
      },
      resizeStop: function(e, ui) {
         var msg = "position.top = " + ui.position.top +
"<br>";
         msg += "position.left = " + ui.position.left +
"<br>";
         msg += "size.width = " + ui.size.width + "<br>";
         msg += "size.height = " + ui.size.height + "<br>";
         $("#div1").append(msg + "<br>");
      },
      buttons: {
         " ": function() {
            $(this).dialog("close");
         }
      }
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana;">
<div id="dialog" title=" ">
<input type="checkbox" id="ckb1">    
</div>
<div id="div1"></div>
</body>
</html>

==================================================================
 12.23.     
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Datepicker.   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript"
      src="development-bundle/ui/i18n/ui.datepicker-
ru.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#datepicker1").datepicker();
   $("#datepicker2").datepicker();
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana">
<table border="0"><tr><td>
<div id="datepicker1"></div>
</td><td valign="top">
<input type="text" id="datepicker2">
</td></tr></table>
</body>
</html>

==================================================================
 12.24.  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Datepicker.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript"
      src="development-bundle/ui/i18n/ui.datepicker-
ru.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $.datepicker.setDefaults( //    
      $.extend($.datepicker.regional["ru"], {
         prevText: "MM",
         nextText: "MM",
         currentText: "dd.mm.yy",
         dateFormat: "dd.mm.y"
      })
   );
   $("#datepicker1").datepicker(); //  
   // ,      

   $("#datepicker2").datepicker({
      maxDate: "+1y", //  
      minDate: "-12w", //  
      showButtonPanel: true, //    
      numberOfMonths: 3, //   3 
      stepMonths: 3, //    3 
      hideIfNoPrevNext: true,
      navigationAsDateFormat: true
   });
   // ,      

   //    
   $("#datepicker3").datepicker({
      changeMonth: true, //    
      changeYear: true, //    
      yearRange: "1970:2009", //     
      showOn: "button", //     
      buttonImage: "calendar.gif", //  
      buttonImageOnly: true, //  
 
      appendText: "  ",
      altField: "#txt1", //    
      altFormat: "dd M yy" //    

   });
   $("#btn1").click(function() { //   
      $("#datepicker2").datepicker("option", "dateFormat", "dd
M yy");
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana">
<div id="datepicker1"></div><br><br>
<input type="text" id="datepicker2">
<input type="button" value=" "
id="btn1"><br><br>
<input type="text" id="datepicker3"> <input type="text"
id="txt1">
</body>
</html>

==================================================================
 12.25.     
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Datepicker. </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript"
      src="development-bundle/ui/i18n/ui.datepicker-
ru.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#datepicker").datepicker();
   $("#btn1").click(function() {
      $("#datepicker").datepicker("disable");
   });
   $("#btn2").click(function() {
      $("#datepicker").datepicker("enable");
   });
   $("#btn3").click(function() {
      if ($("#datepicker").datepicker("isDisabled")) {
         alert("");
      }
      else {
         alert("");
      }
   });
   $("#btn4").click(function() {
      $("#datepicker").datepicker("show");
   });
   $("#btn5").click(function() {
      $("#datepicker").datepicker("hide");
   });
   $("#btn6").click(function() {
      $("#datepicker").datepicker("setDate", "+1y");
   });
   $("#btn7").click(function() {
      alert($("#datepicker").datepicker("getDate"));
   });
   $("#btn8").click(function() {
      $("#datepicker").datepicker("dialog", "27.06.2009",
      function(dateText) {
         alert(" : " + dateText);
      }, { changeMonth: true, changeYear: true }, [200, 200]);
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana">
<input type="button" value="" id="btn1">
<input type="button" value="" id="btn2">
<input type="button" value=" " id="btn3">
<input type="button" value="" id="btn4">
<input type="button" value="" id="btn5">
<input type="button" value=" " id="btn6">
<input type="button" value=" " id="btn7">
<input type="button" value=" " id="btn8"><br><br>
<input type="text" id="datepicker">
</body>
</html>

==================================================================
 12.26. UI Datepicker,  
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Datepicker.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript"
      src="development-bundle/ui/i18n/ui.datepicker-
ru.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#datepicker").datepicker({
      changeMonth: true, //    
      changeYear: true, //    
      yearRange: "1970:2009", //     
      maxDate: "+1y", //  
      minDate: "-12w", //  
      beforeShow: function(elem) {
         $("#div1").html(" beforeShow<br>");
         $(elem).css("background-color", "#fff4dd");
      },
      beforeShowDay: function(d) {
         var curd = $.datepicker.formatDate("dd.mm.yy", new
Date());
         var dat = $.datepicker.formatDate("dd.mm.yy", d);
         //    ,   
  
         //  cls1,     
         if (dat == curd) return [true, "cls1", "
"];
         //     10,   

         else if (d.getDate() == 10) return [false, "cls2"];
         else return [true, "cls2"];
      },
      onChangeMonthYear: function(y, m, obj) {
         var msg = " onChangeMonthYear<br>";
         msg += ": " + y + "<br>: " + m + "<br>"
         $("#div1").append(msg);
      },
      onSelect: function(d, obj) {
         var msg = " onSelect<br> : " + d;
         $("#div1").append(msg + "<br>");
      },
      onClose: function(d, obj) {
         var msg = " onClose<br>";
         if (obj.currentDay == 0) msg += " 
<br>";
         else {
            msg += " : " + obj.currentDay + ".";
            msg += (obj.currentMonth + 1) + "." +
obj.currentYear;
            msg += "<br>";
         }
         $("#div1").append(msg);
         $(this).css("background-color", "#ffffff");
      }
   }).css("background-color", "#ffffff");
});
//-->
</script>
<style>
.cls1 { background-color: red; }
.cls2 { }
</style>
</head>
<body style="font-size:8pt; font-family:Verdana">
<input type="text" id="datepicker">
<div id="div1"></div>
</body>
</html>

==================================================================
 12.27.  UI Progressbar,  . 
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Progressbar.  </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/sunny/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#progressbar").progressbar({
      value: 60
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana">
<div style="width: 500px;"><div id="progressbar"></div></div>
</body>
</html>

==================================================================
 12.28.  UI Progressbar,   
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Progressbar.   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/sunny/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#progressbar").progressbar({
      value: 60,
      change: function() {
         $("#div1").append(" change<br>");
      }
   }).bind("progressbarchange", function() {
      $("#div1").append(" progressbarchange<br>");
   });
   $("#btn1").click(function() {
      var val = parseInt($("#txt1").val());
      if (!isNaN(val)) {
         $("#progressbar").progressbar("option", "value",
val);
         //$("#progressbar").progressbar("value", val);
      }
      else alert("  ");
   });
   $("#btn2").click(function() {
      alert($("#progressbar").progressbar("option", "value"));
   });
   $("#btn3").click(function() {
      $("#progressbar").progressbar("disable");
   });
   $("#btn4").click(function() {
      $("#progressbar").progressbar("enable");
   });
});
//-->
</script>
<style>
   /*      */
   .ui-progressbar-value { background-image:url(animate.gif);
}
</style>
</head>
<body style="font-size:8pt; font-family:Verdana">
<div style="width: 500px;"><div id="progressbar"></div></div>
<br><br>
  : <input type="text" id="txt1"><br><br>
<input type="button" value=" " id="btn1">
<input type="button" value=" "
id="btn2"><br><br>
<input type="button" value="" id="btn3">
<input type="button" value="" id="btn4"><br><br>
<div id="div1"></div>
</body>
</html>

==================================================================
 12.29.  UI Slider,   
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Slider.   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#slider1").slider({
      range: true,
      values: [10, 65]
   });
   $("#slider2").slider({
      range: false,
      value: 50
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana"><br><br>
<div style="width: 500px;">
<div id="slider1"></div><br><br>
<div id="slider2"></div>
</div><br><br>
</body>
</html>

==================================================================
 12.30.  UI Slider, ,   
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Slider. ,   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#slider1").slider({
      max: 200, //   
      min: 0, //   
      range: true, //     
      values: [10, 65], //  
      orientation: "auto",
      step: 10, // 
      animate: true //    
   });
   $("#slider2").slider({
      range: "min", //     
      value: 40, //     
      orientation: "horizontal", // 
 
      change: function(e, ui) {
         alert(" : " + ui.value);
      }
   });
   $("#slider3").slider({
      values: [25, 50, 75], //   

      change: function(e, ui) {
         alert(" : " + ui.values);
      }
   });
   $("#slider4").slider({
      range: "max", //    
      value: 60, //     
      orientation: "vertical", //  

      start: function() {
         $("#div1").append(" start<br>");
      },
      slide: function() {
         $("#div1").append(" slide<br>");
      },
      change: function() {
         $("#div1").append(" change<br>");
      },
      stop: function() {
         $("#div1").append(" stop<br>");
      }
   }).bind("slidestart", function() {
      $("#div1").html(" slidestart<br>");
   }).bind("slide", function() {
      $("#div1").append(" slide (bind)<br>");
   }).bind("slidechange", function() {
      $("#div1").append(" slidechange<br>");
   }).bind("slidestop", function() {
      $("#div1").append(" slidestop<br>");
   });
   $("#btn1").click(function() {
      var val = parseInt($("#txt1").val());
      if (!isNaN(val)) {
         // $("#slider2").slider("option", "value", val);
         $("#slider2").slider("value", val);
      }
      else alert("  ");
   });
   $("#btn2").click(function() {
      alert($("#slider2").slider("option", "value"));
      // alert($("#slider2").slider("value"));
   });
   $("#btn3").click(function() {
      var val = parseInt($("#txt2").val());
      if (!isNaN(val)) {
         $("#slider3").slider("values", 1, val);
      }
      else alert("  ");
   });
   $("#btn4").click(function() {
      var arr = $("#slider3").slider("option", "values");
      alert(arr[1]);
      // alert($("#slider3").slider("values", 1));
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana"><br><br>
<div style="width: 600px;">
<div id="slider1"></div><br><br>
<div id="slider2"></div><br>
<input type="text" id="txt1">
<input type="button" value="  "
id="btn1">
<input type="button" value=" "
id="btn2"><br><br><br>
<div id="slider3"></div><br>
<input type="text" id="txt2">
<input type="button" value="  
" id="btn3">
<input type="button" value=" "
id="btn4"><br><br><br>
<div id="slider4"></div>
</div><br><br>
<div id="div1"></div>
</body>
</html>

==================================================================
 12.31.  UI Effects,   
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Effects.   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
   position:absolute; top:50px; left:50px; width:100px;
height:100px;
   padding:2px; border:1px solid #000000; text-align:center;
   background-color:#000000; color:#e8e8e8;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var color = $("#txt1").val();
      if (color.length == 0) alert("  ");
      else $("#div1").animate({ backgroundColor: color },
2000);
   });
});
//-->
</script>
</head>
<body>
: <input type="text" id="txt1">
<input type="button" value="  "
id="btn1"><br><br>
<div id="div1">  </div>
</body>
</html>

==================================================================
 12.32.  UI Effects,   
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Effects.   </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
   position:absolute; top:50px; left:50px; width:100px;
height:100px;
   padding:2px; border:1px solid #000000; text-align:center;
}
.cls1 { background-color:#000000; color:#ffffff; }
.cls2 { background-color:#FF0000; color:#008800; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() { //  
      var elem = $("#div1");
      if (!elem.is(".cls1") && !elem.is(".cls2"))
         elem.addClass("cls1", 1000);
   });
   $("#btn2").click(function() { //  
      var elem = $("#div1");
      if (elem.is(".cls1")) elem.removeClass("cls1", 1000);
      else if (elem.is(".cls2")) elem.removeClass("cls2",
1000);
   });
   $("#btn3").click(function() { // 
      var elem = $("#div1");
      if (elem.is(".cls2")) elem.removeClass("cls2", 1000);
      else elem.toggleClass("cls1", 1000);
   });
   $("#btn4").click(function() { //  
      var elem = $("#div1");
      if (elem.is(".cls1")) elem.switchClass("cls1", "cls2",
1000);
      else if (elem.is(".cls2")) elem.switchClass("cls2",
"cls1", 1000);
      else elem.addClass("cls2", 1000);
   });
});
//-->
</script>
</head>
<body>
<input type="button" value=" " id="btn1">
<input type="button" value=" " id="btn2">
<input type="button" value="" id="btn3">
<input type="button" value=" " id="btn4"><br><br>
<div id="div1">  </div>
</body>
</html>

==================================================================
 12.33.  UI Effects,  show(), hide()  toggle()
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Effects.  show(), hide()  toggle()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#img1").show($("#effect").val(), { }, 2000);
   });
   $("#btn2").click(function() {
      $("#img1").hide($("#effect").val(), { }, 2000);
   });
   $("#btn3").click(function() {
      $("#img1").toggle($("#effect").val(), { }, 2000);
   });
});
//-->
</script>
</head>
<body>
<b>       
</b><br><br>
<select id="effect">
<option value="blind">Blind</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="slide">Slide</option>
</select>
<input type="button" value="show()" id="btn1">
<input type="button" value="hide()" id="btn2">
<input type="button" value="toggle()" id="btn3">
<br><br>
<img src="img.gif" id="img1" style="width:300px;
height:225px;">
</body>
</html>

==================================================================
 12.34.  UI Effects,  Transfer
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Effects.  Transfer</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
      type="text/javascript"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
   width:100px; height:100px;
   padding:2px; border:1px solid #000000; text-align:center;
   background-color:#000000; color:#ffffff;
}
#div2 {
   position:absolute; top:250px; left:450px; width:50px;
height:50px;
   border:1px solid #000000; background-color:#0000ff;
}
.cls1 { border:1px dotted #000000; background-color:#ff0000; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#div1").click(function() {
      $(this).effect("transfer", {className: "cls1", to:
"#div2"}, 2000);
   });
});
//-->
</script>
</head>
<body>
<div id="div1">    </div>
<div id="div2"></div>
</body>
</html>

